import { Card, CardProps } from 'antd'
import React from 'react'

export interface CardController {
    loading: (state: boolean) => void
    closeLoading: () => void
    loadingState: boolean
}

export function useCard(): CardController {
    const [loadingState, setLoadingState] = React.useState(false)

    return {
        loading: (state: boolean) => setLoadingState(state),
        closeLoading: () => setLoadingState(false),
        loadingState,
    }
}

interface LHCardProps extends CardProps {
    card: CardController
    children?: React.ReactNode
}

const LHCard: React.FC<LHCardProps> = ({
    card,
    children,
    ...props
}: LHCardProps) => {
    return (
        <Card
            loading={card.loadingState}
            style={{ height: 'fit-content' }}
            {...props}
        >
            {children}
        </Card>
    )
}


export default LHCard